<template>
  <div class="list">
    <!-- 抬头 -->
    <div class="head">
      <van-nav-bar title=" World Of Flowers" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
      
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
      
    </div>
    
    <!-- 左侧的星座分类栏 -->
    <div class="left">
      <!-- 遍历axios请求获取的星座名称 解构获得fid name -->
      <ul v-for="{ fid, name } in xzname" :key="fid">
        <!-- 点击事件，并将fid传递 -->
        <span @click="getpic(fid)">{{ name }}</span>
      </ul>
    </div>

    <!-- 右侧的星座对应的图片 -->
    <div class="right">
      <ul v-for="p in xzpic" :key="p.fid">
        <li>
          <img :src="baseURL + 'flower_info/' + p.pic" alt="" />
          <!-- 右侧的信息栏 -->
          <div class="message">
            <!-- 标题 第一个span-->
            <span>{{ p.title }}</span>
            <!-- 副标题 第二个span-->
            <span>{{ p.subtitle }}</span>
            <!-- 价格 -->
            <span>已售{{ p.sold_count }}/件</span>
            <div class="add">
              <!-- 第三个span -->
              <span>￥{{ p.price }}</span>
              <!-- 购物车图片及按钮 -->
              <van-icon name="shopping-cart-o" color="#65b1fd" size="1.5rem" @click="addcart"/>
              <!-- 传参到购物车 -->
              <!-- :data-price="price"
                :data-title="title"
                :data-flower_id="flower_id"
                :data-pic="pic" -->
            </div>
          </div>
        </li>
      </ul>
    </div>
    <tabbar/>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Tabbar from "../components/common/Tabbar.vue";

export default {
  components: { Tabbar },
  computed: { ...mapState(["baseURL"]) },
  data() {
    return {
      xzname: [],
      xzpic: [],
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  mounted() {
    this.getlist();
    this.getpic();
  },
  methods: {
    getlist() {
      const url = this.baseURL + "product/list";
      this.axios.get(url).then((res) => {
        console.log("星座列表:", res.data.data);
        this.xzname = res.data.data;
        console.log(this.xzname);
        this.getpic(this.xzname[0].fid);
      });
    },
    getpic(fid) {
      // const url=this.baseURL+'product/listall/'+fid
      const url = this.baseURL + "product/listall/" + fid;
      console.log(url);
      this.axios.get(url).then((res) => {
        console.log("根据fid获取对应图片:", res.data.data);
        this.xzpic = res.data.data;
      });
    },
    addcart() {
      if (!this.$store.state.islogin) {
        this.$messagebox("请先登录!").then(() => {
          this.$router.push("/login");
        });
      }
      // else{
      //   // 添加到购物车................................
      //   this.$router.push('/')
      // }
    },
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.list {
  user-select: none;
  // display: flex;
  .head {
    position: fixed;
    top: 0vh;
    width: 100vw;
    z-index: 999;
    .van-nav-bar {
      background-image: linear-gradient(to top, #f3fffb, #f3f3ff);
      height: 7vh;
    }
    // .nav{
    //   position: fixed;
    //   top: 10vh;
    // }
  }
  .left {
    //固定定位
    position: fixed;
    top: 15vh;
    left: 0;
    ul {
      width: 25vw;
      line-height: 6vh;
      background-image: linear-gradient(to right, #e0fff5, #ededff);
      // 增加透明度
      opacity: 0.8;
      text-align: center;
      border: 1px solid rgb(192, 202, 255);
    }
    span {
      color: rgb(59, 55, 55);
    }
  }
}
.right{
  position: absolute;
  top: 15vh;
  right: 2.5vw;
  display: block;
  height: 20vh;
  // 滑至最底部，将最下面显示不完整的图片推上来！！！！！
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 8vh;
  }
  ul {
    user-select: none;
    display: flex;
    width: 70vw;
    height: 20vh;
    background-image: linear-gradient(to right, #f6fffc, #f4f4ff);
    border-radius: 10px;
    border: 1px solid rgb(192, 202, 255);
    box-shadow: 1px 1px 1px 1px #dddefe;
    margin-bottom: 2vh;
    // 单个商品的选项框
    li {
      // 使图片和文字弹性布局
      display: flex;
      img {
        display: block;
        width: 30vw;
        height: 18vh;
        margin: 1vh 0 0 2vw;
        border-radius: 13px;
        box-shadow: 1px 1px 1px 1px #dddefe;
      }
      .message {
        margin-top: 1vh;
        margin-left: 2vw;
        display: flex;
        flex-direction: column;
        color: rgb(36, 30, 30);
        // 每个父元素下面的第一个子元素如果是span就生效,若没有子元素生效自身，有子元素看第一个元素是不是span，不是就不生效
        span:first-child {
          font-size: 14px;
          font-weight: 900;
          // border: 1px solid red;
        }
        // 详情
        span:nth-child(2) {
          font-size: 12px;
          width: 32vw;
          color: #788;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // 价格
        span:nth-child(3) {
          font-size: 10px;
          color: #1b1917;
          margin-top: 4vh;
        }
        .add{
          span{
            font-size: 14px;
            color: rgb(255, 163, 163);
          }
          .van-icon{
            margin-top: 3vw;
            margin-left: 7vw;
          }
        }
      }
    }
  }
}
</style>